<template>
    <view class="wrap">
        <view class="close" @click="goback"></view>

        <PreView :preList="preList" :isShowWatermark="isShowWatermark" :defaultIndex="targetIndex" @slideChange="slideChange"></PreView>

        <view class="footer">
            <view class="downBox" @click="goDownLoad">
                <view class="downbg"></view>
                <view class="downtxt">下载</view>
            </view>
        </view>
    </view>
</template>

<script>
import PreView from '@/components/PreView/index.vue';
export default {
    data() {
        return {
            preList: [],
            currentIndex: 0,
            isShowWatermark: false,
            targetIndex: 0
        };
    },
    onLoad(option) {
        let list = [];
        this.vuex_myPhotosList.forEach(item => {
            item.photos.forEach(item2 => {
                item2.isOk=false;
                list.push(item2);
            });
        });
        this.targetIndex = list.findIndex(value => {
            return value.imageId == option.targetId;
        });
        this.preList = list;
    },
    methods: {
        goback() {
            uni.navigateBack();
        },
        slideChange(index) {
            this.currentIndex = index;
        },
        // 去下载
        goDownLoad() {
            this.$u.throttle(this.loadFile, 500)
        },
        async loadFile(){
            let url = this.preList[this.currentIndex].image_url;
            let isTrueDomain = this.$config.domainPath.some(item => {
                return url.includes(item);
            });
            if (isTrueDomain) {
                  try {
                    let tempPath = await this.$uniPromise.downloadFile({ url: url });
                    try{
                        let res = await this.$uniPromise.saveImageToPhotosAlbum({ filePath: tempPath.tempFilePath });
                        this.$showToast('保存成功');
                    }catch(err){
                        this.$showToast('保存失败');
                    }
                  } catch (err) {
                    this.$showToast('图片下载失败，请检查网络状况！');
                  }
            } else {
                this.$showToast('图片地址不在合法域名之内！');
            }
        }
    },
    components: {
        PreView
    }

};
</script>

<style lang="scss" scoped>
.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .close {
        width: 30rpx;
        height: 30rpx;
        position: fixed;
        top: 35rpx;
        right: 15rpx;
        background: url(@/pages/minePages/static/preview/close.png) no-repeat center;
        background-size: cover;
    }
    // 轮播
    .swipeBox {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 500rpx;
        margin: 180rpx 0 60rpx 0;
        .swiper {
            height: 500rpx;
            .swiper-item {
                position: relative;
                width: 100%;
                height: 500rpx;
                background: #c3c3c3;
                .oneswipeImg {
                    width: 100%;
                    height: 500rpx;
                }
            }
        }
    }
    // 滑动
    .slideBox {
        width: 100%;
        height: 134rpx;
        overflow-x: scroll;
        font-size: 0;
        -webkit-overflow-scrolling: touch;
        .slideContent {
            height: 100%;
            padding-left: 30rpx;
            .onebox {
                position: relative;
                width: 200rpx;
                height: 100%;
                background: #c3c3c3;
                border-radius: 10rpx;
                margin-right: 30rpx;
                display: inline-block;
                .oneslideImg {
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    border-radius: 10rpx;
                    pointer-events: none;
                }
            }
            .currentBorder {
                &::after {
                    position: absolute;
                    content: '';
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 190rpx;
                    height: 122rpx;
                    border: 6rpx solid #70c65d;
                    border-radius: 10rpx;
                }
            }
        }
    }
    .footer {
        position: fixed;
        width: 100%;
        height: 98rpx;
        background: #000000;
        color: #ffffff;
        left: 0;
        bottom: 0;
        .shareBox,
        .downBox {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            font-size: 0;
            position: relative;
            .sharebg,
            .downbg {
                width: 42rpx;
                height: 40rpx;
                margin-top: 29rpx;
                display: inline-block;
            }
            .sharebg {
                background: url(@/pages/minePages/static/preview/share.png);
                background-size: cover;
            }
            .downbg {
                background: url(@/pages/minePages/static/preview/down.png);
                background-size: cover;
            }
            .sharetxt,
            .downtxt {
                font-size: 30rpx;
                padding-top: 29rpx;
                margin-left: 20rpx;
                display: inline-block;
            }
        }
    }
    .bigImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        .img {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 100%;
            transform: translate(-50%, -50%);
            -webkit-filter: blur(15px);
            filter: blur(6px);
        }
        .shadow {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
        }
    }
}
</style>
